<template>
  <div>
    <puplic-modal
      width="560px"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @handleOk="handleOk"
      @cancel="cancel"
      :title="title"
    >
      <div slot="content">
        <a-form :form="form" class="formStyle" autocomplete="off" layout="inline">
          <div class="title">
            <div class="icon"></div>
            <div class="context">项目信息</div>
          </div>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="安装包文件">
                <a-upload
                  name="file"
                  :multiple="false"
                  accept=".apk,.rar,.zip"
                  :file-list="fileList"
                  :before-upload="beforeUpload"
                  :customRequest="customRequest"
                >
                  <a-button class="upload-btn">
                    <!-- <upload-outlined></upload-outlined> -->
                    点击上传
                  </a-button>
                  <span style="font-size: 0.14rem; font-weight: 500; color: #01a1a2; margin-left: 20px">
                    {{ name !== '' && name !== undefined ? name : '( 请上传apk、rar、zip文件 )' }}
                  </span>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="版本名称">
                <a-input
                  placeholder="请输入版本名称"
                  v-decorator="[
                    'versionName',
                    {
                      rules: [{ required: true, message: '请输入版本名称!' }],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="版本号">
                <a-input
                  placeholder="请输入版本号"
                  v-decorator="[
                    'versionCode',
                    {
                      rules: [
                        { required: true, message: '请输入版本号!' },
                        {
                          pattern: /^[0-9]{0,100}$/,
                          message: '请输入正确的版本号（纯数字）',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="版本描述">
                <a-textarea
                  :maxLength="30"
                  style="height: 50px; overflow: auto; resize: none"
                  v-decorator="[
                    'versionDescribe',
                    {
                      rules: [{ required: true, message: '请输入版本描述!' }],
                    },
                  ]"
                  placeholder="请输入版本描述"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </puplic-modal>
  </div>
</template>
<script>
import { uploadFile } from '@/api/api'
import puplicModal from '@/components/publicModal'
import { addVersion, addVersionDetailEdit } from '@/api/operate'
export default {
  components: { puplicModal },
  name: 'addEditSupportModal',
  data() {
    return {
      url: '',
      name: '',
      records: {},
      fileList: [],
      title: '新增版本信息',
      publicVisible: false,
      form: this.$form.createForm(this),
    }
  },
  activated() {
    console.log(name, 'name')
    // this.fileList = []
    // this.name = ''
  },
  methods: {
    show(records) {
      console.log(records, 'records')
      this.records = records
      this.publicVisible = true
      if (records && records.id) {
        this.title = '编辑版本信息'
        this.$nextTick(() => {
          this.url = records.url
          this.name = records.apkName
          this.form.setFieldsValue({ ...records })
        })
      } else {
        this.title = '新增版本信息'
        this.$nextTick(() => {
          this.form.setFieldsValue()
        })
      }
    },

    beforeUpload(file) {},

    async customRequest(info) {
      let file = info.file
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 11)
      let res = await uploadFile(formData)
      if (res.code == 200) {
        this.url = res.result.halfPath
        this.name = info.file.name
      }
    },

    handleOk() {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }

        if (!this.url.length) {
          this.$message.warn('请上传文件')
          return
        }

        if (this.title == '编辑版本信息') {
          const formData = new FormData()
          formData.append('url', this.url)
          formData.append('id', this.records.id)
          formData.append('projectId', this.$route.query.id)
          formData.append('versionName', values.versionName)
          formData.append('versionCode', values.versionCode)
          formData.append('versionDescribe', values.versionDescribe)
          addVersionDetailEdit(formData).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message)
              this.cancel()
              this.$emit('refresh')
            }
          })
        } else {
          const formData = new FormData()
          formData.append('url', this.url)
          formData.append('projectId', this.$route.query.id)
          formData.append('versionName', values.versionName)
          formData.append('versionCode', values.versionCode)
          formData.append('versionDescribe', values.versionDescribe)
          addVersion(formData).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message)
              this.cancel()
              this.$emit('refresh')
            }
          })
        }
      })
    },
    cancel() {
      this.publicVisible = false
      this.url = ''
      this.name = ''
      this.fileList = []
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';

/deep/ .content {
  padding: 20px;
}
.search-group {
  padding: 10px 0;
}

.title {
  display: flex;
  align-items: center;
  margin: 10px 0;
  .icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    background: #0597aa;
  }
  .context {
    font-size: 16px;
    font-weight: bold;
    color: #03c5a7;
  }
}

.upload-btn {
  width: 120px;
  height: 36px;
  background: #05434a;
  border-radius: 4px;
  border: 1px solid #096370;
  font-size: 14px;
  font-weight: 500;
  color: #01a1a2;
}
</style>
